<template>
  <div class="detail_head">
    <ul>
      <li class="first">
        <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
        <p>何大辉的博客</p>
      </li>
      <li class="second">
        <el-input v-model="input" placeholder="请输入内容">
          <el-button class="search_btn" icon="el-icon-search" @click="search_keyword" slot="append" circle>搜索</el-button>
        </el-input>

      </li>
      <li>
        <aplayer
          :music="Mymusic"    theme="#41b883" controls :volume="vol"/>
      </li>
    </ul>




  </div>
</template>

<script>
  import  commonUtils from  '../common/commonUtils'
  import Aplayer from 'vue-aplayer'
  export default {
    name: 'detailHead',
    data(){
      return {
        squareUrl: '',
        vol: 0.3,
        input: '',
        Mymusic: {},
      }
    },
    components:{
      Aplayer
    },
    methods:{
      search_keyword(){
        if (!this.input) {
             commonUtils.AlertOperationSuccess("请输入关键词!!!",1000)
          return ;
        }
        var keyword = this.input
           this.$store.dispatch("search_keyword",keyword)
        this.input = ''

      },
      intitMusic(){
          //初始化音乐。
        this.axios.post("/dic/initMusic").then(success =>{
          if (success.data.code == 0) {
            console.log(success)
            this.Mymusic =success.data.result.music;
            this.squareUrl=success.data.result.avatar.value


          }else {
             commonUtils.AlertOperationSuccess("获取音乐数据失败,无法播放!","1000")
          }
        }).catch(error =>{
            console.log("初始化音乐播放器数据失败!")
        })
      }

    },
    mounted () {
      this.intitMusic();
    }
  }
</script>

<style scoped>
  /*------自定义的样式--------*/

  .detail_head{
    width: 100%;
    height: 100%;

  }
  .detail_head ul li{
    list-style: none;
    float: left;
    margin-right: 1%;
    height: 70px;
  }
  .detail_head ul li:nth-of-type(1) {
    /*background-color: red;*/

    width: 32%;
  }
  .first{

    position: relative;
  }
  .first .el-avatar{
    position: absolute;
    left: 30%;
    bottom: 10px;
  }
  .first p{
    font-size:  24px;
    font-family: "幼圆","华文宋体","华文楷体","黑体","Times New Roman"  ;

    line-height: 70px;
    position: absolute;
    right: 20%;
  }

  .detail_head ul li:nth-of-type(2) {
    /*background-color: blue;*/
    width: 32%;
    height: 70px;
  }
  .second .el-input{
    height: 40px;
    width: 80%;
    margin-top:15px;
    border-radius: 10px;
  }

  .detail_head ul li:nth-of-type(3) {
    /*background-color: green;*/
    width: 32%;
  }
  .aplayer{
    width: 90%;
    height: 90%;
    margin: 0;
    margin-top: 3px;
  }
</style>
